<template>
  <div class="whole">
    <div class="title">
      <span>点击收缩动画记录</span>
    </div>
    <div class="world">
      <div 
        class="left-0"
        :class="getIsShrinkClass()"
      >
        <input disabled style="cursor: default;" v-if="!isCollapse" type="color" value="#817412">
        <div class="leftContainer">
          <div class="guideContainer">
            <div class="guide-item">
              <span>左侧div会伸缩</span>
            </div>
            <div class="guide-item">
              <span>点击右侧div会伸缩</span>
            </div>
          </div>
        </div>
      </div>
      <div class="right-0" @click="shrink">
        <span>{{isCollapse ? '点击粉色区域收缩' : '点击粉色区域展开'}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'Animation',
  data() {
    return {
      isFirstClick: false,
      isCollapse: true
    }
  },
  mounted() {
    
  },
  methods: {
    shrink() {
      if(!this.isFirstClick) {
        this.isFirstClick = !this.isFirstClick
      }
      this.isCollapse = !this.isCollapse
    },
    getIsShrinkClass() {
      if(this.isFirstClick) {//点击过了
        if(this.isCollapse) {
          return "shrink"
        } else {
          return "unShrink"
        }
      } else {
        return ""
      }
    }
  }
}
</script>

<style lang='less' scoped>
  .whole {
    width: 100%;
    height: 100%;
    padding: 16px;
    .title {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      outline: 2px solid #fda;
    }
  }
  .world {
    width: 100%;
    height: calc( 100% - 50px );
    // padding: 8px;
    outline: 2px solid #9ac4ee;
    display: flex;
    .left-0 {
      width: 300px;
      height: 100%;
      background-color: rgb(208, 241, 208);
      transition: width 1s ease-in-out;
      overflow: hidden;
      position: relative;
      input { 
        /* removes default styling from input color element */
        padding: 0;
        border: none; 
        /* makes input (color swatch) 100% size of container */
        position: absolute;
        width: 100%; 
        height: 100%;
        /* mix blend mode makes the color of the swatch alter the image behind it. */
        mix-blend-mode: difference; /* try screen, multiply or other blend modes for different effects */
        cursor: pointer;
        box-shadow: inset 1px 1px 10px 12px red;
      }
      .leftContainer {
        padding: 8px 16px;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .guideContainer {
        width: 250px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .guide-item {
          width: 246px;
          height: 150px;
          background-image: url('../../../assets/images/guide/lc_normal.png');
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100% 100%;
          margin-bottom: 8px;
          display: flex;
          justify-content: center;
          align-items: center;
          white-space: pre-wrap;
          line-height: 18px;
        }
        .guide-item:hover {
          filter: drop-shadow(0px 2px 8px rgba(24, 144, 255, 0.35));
        }
        .guide-item:last-child {
          background-image: url('../../../assets/images/guide/lc_end.png');
        }
      }
    }
    .right-0 {
      /* width: calc( 100% - 300px ); */
      background-color: darksalmon;
      flex: 1;
      height: 100%;
      display: flex;
      overflow: auto;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      white-space: pre-wrap;
      line-height: 24px;
      font-size: 20px;
      font-weight: bold;
      /* transition: width 1.3s ease-in-out; */
      user-select: none;
    }
  }
  @keyframes collapseAction {
    0% {width: 60px;}
    100% {width: 300px;}
  }
  @keyframes collapseNoAction {
    0% {width: 300px;}
    100% {width: 60px;}
  }
  .shrink {
    animation: collapseAction 0.5s 1 forwards;
    animation-timing-function: ease-in-out;
    /* animation-timing-function: cubic-bezier(0.1,0.03,0.05,1.3); */
    animation-direction: alternate;
  }
  .unShrink {
    animation: collapseNoAction 0.5s 1 forwards;
    animation-timing-function: ease-in-out;
    /* animation-timing-function: cubic-bezier(0.1,0.03,0.05,1.3); */
    animation-direction: alternate;
  }
</style>